<!--
  上传组件（向后端服务器获取表单形式， 直传到oss）

  @author will
  @site https://pt.jdyd.xyz
  @date 2022/01/14 12:14
-->
<template>
  <div style="">
    <!-- 上传图片，图片压缩，不能使用 :action, 使用 :customRequest-->
    <!-- :action="vdata.action"  :customRequest="uploadImage" -->
    <a-upload
      v-model:fileList="vdata.fileList"
      :action="vdata.action"
      name="file"
      :beforeUpload="beforeUploadFunc"
      :headers="vdata.headers"
      :data="vdata.formParams"
      list-type="text"
      :showUploadList="props.showUploadList"
      :multiple="false"
      :accept="vdata.accept"
      :disabled="props.disabled"
      @preview="previewFileFunc"
      @change="handleChange"
    >
      <slot v-if=" !props.showUploadList || vdata.fileList.length <= 0" name="uploadBtn">
        <div class="ant-upload-list ant-upload-list-picture" style="cursor: pointer;">
          <span><div class="ant-upload-list-item ant-upload-list-item-undefined ant-upload-list-item-list-type-picture" style="padding-top: 20px;"><upload-outlined />上传</div></span>
        </div>
      </slot>
      <template #itemRender="{ file, actions }">
        <slot name="itemRender" :file="file" :actions="actions">
          <div class="ant-upload-list-item ant-upload-list-item-undefined ant-upload-list-item-list-type-picture" style="display: flex;align-items: center;gap: 8px;margin-top: 0;">
            <!-- <img @click="actions.preview" :src="file.url" alt="{{ file.name }}" style="width: 48px;cursor: pointer;"/> -->
            <!-- <video @click="actions.preview" :src="file.url" alt="{{ file.name }}" style="width: 48px;cursor: pointer;"/> -->
            <!-- <a target="_blank" :href="vdata.formReqFileUrl" :style="file.status === 'error' ? 'color: red' : 'color: #1890ff'" style="flex-grow: 1;cursor: pointer;">{{ vdata.formReqFileUrl ? vdata.formReqFileUrl : '' }}</a>
            <a href="javascript:;" @click="actions.remove"><delete-outlined :style="{ color: 'rgba(0,0,0,0.45)'}"/></a> -->
            <span :style="file.status === 'error' ? 'color: red' : 'color: #1890ff'" style="flex-grow: 1;cursor: pointer;" @click="actions.preview">{{ file.name }}</span>
            <a href="javascript:;" @click="actions.remove"><delete-outlined :style="{ color: 'rgba(0,0,0,0.45)'}" /></a>
          </div>
        </slot>
      </template>
    </a-upload>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import appConfig from '@/config/appConfig'
import storage from '@/utils/gzStorageWrapper'
import { reactive,defineProps, getCurrentInstance, onMounted, watch } from 'vue'
import {API_URL_UPLOAD_SINGLE_FILE_URL, $getUploadFormParams, /* $orcScan */} from '@/api/manage'
import { sm4DecryptByResData } from '@/utils/encryptUtil'
import { shrinkImage } from 'shrinkpng'
import { config } from 'process'
import { nextTick } from 'process'
const { $infoBox, $viewerApi } = getCurrentInstance()!.appContext.config.globalProperties

// 定义 父组件传参
const props = defineProps ({
    showUploadList: { type: Boolean, default: true }, // 是否显示上传的列表， 一般都需要显示，  比如头像需要自定义的话那么则不需要显示，并且按钮常显
    src: { type: String, default: '' }, // 双向绑定  文件地址
    bizType: { type: String, default : ''}, // 业务类型
    fileType: { type: String, default: 'file' }, // img or file 
    accept: { type: String, default: null }, // 上传文件的accept
    uploadMode: {type: String, default: 'formRedirect'}, // 上传方式： formRedirect 先获取form表单地址直传oss,  file：上上传到本地后端服务器在上传到oss方式。
    // ocrType: {type: String, default: null }, // orc类型如果存在值则上传成功后自动调起ORC识别功能
    disabled: { type: Boolean, default: false }, // 是否禁用
    size: { type: Number, default: 20 }, // 图片限制大小,单位M
    isTrue:false,
})

  // 父组件通讯函数
const emit = defineEmits(['update:src', 'change', 'ocrScan','sendData'])

// 定义响应式数据 
const vdata : any = reactive({
    action: '',  // 文件form表单请求地址 
    fileList: [], // 全部文件集合
    formParams: {}, // 上传参数
    headers: {}, // 放入token
    formReqFileUrl: '', // 第一次的form请求的图片数据， 如果存在则使用该地址， 否则使用文件上传的响应地址。 
    accept: null, //上传文件的accept

    ysFile:null
})

onMounted(() => {
 if(props.src){
   vdata.fileList = [{ url: props.src, name: getFileName(props.src) }]
 }
 
 // 处理 accept
 if(!props.accept && [
          'mp4',
          'ogg',
          'flv',
          'avi',
          'wmv',
          'rmvb'
        ].indexOf(props.fileType) === -1 ){
    vdata.accept = 'mp4' // 所有的图片格式
 }else{
   vdata.accept = props.accept
 }

})

// // 监听变化
watch( () => props.src ,(newVal, oldVal)=>{
  if (newVal) {
    vdata.fileList = [{ url: newVal, name: getFileName(newVal) }]
  }else{
   vdata.fileList = []
  }
})

function getFileName(name){
  if(!name){
    return name
  }
  return name.substring(name.lastIndexOf('/') + 1)
}

  // 上传回调
function handleChange (info) {
  console.log(333,info)

    if (info.file.status !== 'uploading') {
    console.log(info.file, info.fileList)
  }
  if (info.file.status === 'done') {
    $infoBox.message.success(111,`${info.file.name} 上传成功`)
    emit('sendData',vdata.formReqFileUrl)
    emit('update:src',vdata.formReqFileUrl)
  } else if (info.file.status === 'error') {
    $infoBox.message.error(`${info.file.name} 上传失败`)
  }

  // if (!info.file.status) {
  //   vdata.fileList = []
  //   return
  // }
  // if (info.file.status === 'uploading') {
  //   return
  // }
  // if (info.file.status === 'done') { // 上传完成
  //   vdata.fileList = [] // 通过watch 更改文件集合
  //   // 如果包含code 并且 不是0 ： 本系统返回的错误信息。 
  //   if(info.file.response.code &&  info.file.response.code != 0 ){
  //     return $infoBox.message.error(info.file.response.msg)
  //   }
  //   // 上传成功
  //   let successImgUrl = vdata.formReqFileUrl
  //   // 读取响应结果的值
  //   if(!successImgUrl){
  //     successImgUrl = info.file.response.encryptData ? sm4DecryptByResData(info.file.response.encryptData) : info.file.response.data 
  //   }
  //   emit('update:src', successImgUrl)
  //   emit('change', successImgUrl)
  //   // ocrFunc(successImgUrl) // ORC识别
  // } else if (info.file.status === 'error') { // 上传异常
  //   vdata.fileList = []
  //   $infoBox.message.error('上传异常,请联系系统管理员')
  // } else if (info.file.status === 'removed') { // 文件被删除 
  //   vdata.formReqFileUrl = ''
  //   emit('update:src', vdata.formReqFileUrl)
  //   emit('change', vdata.formReqFileUrl)
  // }

}
// 上传文件前的校验
async function beforeUploadFunc (file) {
  // console.log(111,file)
  // console.log(222,file.type)
  // 校验上传的是否是视频
  console.log('sssss',file)
        if (
        [
          'video/mp4',
          'video/ogg',
          'video/flv',
          'video/avi',
          'video/wmv',
          'video/rmvb'
        ].indexOf(file.type) === -1
      ) {
        $infoBox.message.error('请上传正确的视频格式')
        return false
      }
  // 校验文件的大小
  if(file && file.size  > props.size * 1024 * 1024*40){
    var msg = '单个文件请不超过' + props.size + 'MB'
    $infoBox.message.error(msg)
    return false
  }
    if(props.uploadMode == 'formRedirect'){ // form表单方式 
    // 请求获取form参数 
    return $getUploadFormParams(file, 'wechat').then(res => {
      console.log(5555,res)

      if(res.formActionUrl == 'LOCAL_SINGLE_FILE_URL'){ // 本地方式
        localUploadResetInfo()
      }else{
        vdata.action = res.formActionUrl // action 
        vdata.formParams = res.formParams //表单组件 
        vdata.formReqFileUrl = res.ossFileUrl
      }
    })
    }


  // // 压缩图片
  // let _file
  // if(props.fileType == 'xls'){
  //   _file = await shrinkImage(file,{quality:30})
  // }else{
  //   _file = file
  // }
  // vdata.ysFile = _file

  // // 校验文件大小
  // if (_file && _file.size > props.size * 1024 * 1024) {
  //   var msg = '单个文件请不超过' + props.size + 'MB'
  //   $infoBox.message.error(msg)
  //   return false
  // }
  // if(props.uploadMode == 'formRedirect'){ // form表单方式 
  //   // 请求获取form参数 
  //   return $getUploadFormParams(_file, props.bizType).then(res => {

  //     if(res.formActionUrl == 'LOCAL_SINGLE_FILE_URL'){ // 本地方式
  //       localUploadResetInfo()
  //     }else{
  //     vdata.action = res.formActionUrl // action 
  //     vdata.formParams = res.formParams //表单组件 
  //     vdata.formReqFileUrl = res.ossFileUrl
  //     }
  //   })
  }

  // // file文件方式
  // return Promise.resolve((params) => {
  //   localUploadResetInfo()
  // })
// }


// 本地上传的方式，需要设置的form和header等信息 
function localUploadResetInfo(){
  //action 
  vdata.action = API_URL_UPLOAD_SINGLE_FILE_URL
  // token
  vdata.headers[appConfig.ACCESS_TOKEN_NAME] = storage.getToken()
  // params
  vdata.formParams = { bizType: props.bizType }

}

// function ocrFunc(url){
//   if(!props.ocrType){
//     return false
//   }

  /* $orcScan(url, props.ocrType).then((res) => {
    if(!res || JSON.stringify(res)=='{}'){}
    else $infoBox.message.success('图片识别成功，已自动回填内容，请检查核对')
    emit('ocrScan', res)
  }) */
// }


</script>
<style scoped lang="less">

/deep/ .ant-upload-list-item-name {
  flex: auto !important
}

</style>